<template>
  <div class="">
    <!-- 面包屑导航区域 开始 -->
    <el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>章节管理</el-breadcrumb-item>
      <el-breadcrumb-item>查看章节</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 面包屑导航区域 开始 -->
    <div>
      <!-- 主体开始 -->
      <el-card class="box-card">
        <div>
          <el-table
            :data="bookTableData"
            @row-click="chapterDetails"
            v-loading="loading"
            stripe
            style="width: 100%"
          >
            <el-table-column fixed type="index" width="50"> </el-table-column>
            <el-table-column
              :show-overflow-tooltip="true"
              prop="bookName"
              label="书籍名称"
              width="150"
            >
            </el-table-column>
            <el-table-column prop="bookAuthor" label="书籍作者" width="120">
            </el-table-column>
            <el-table-column
              :show-overflow-tooltip="true"
              prop="bookIntroduction"
              label="书籍简介"
              width="120"
            >
            </el-table-column>
            <el-table-column prop="" label="书籍封面" width="120">
              <template slot-scope="scope">
                <img
                  :src="scope.row.bookCover"
                  width="80px"
                  height="100px"
                  alt=""
                />
              </template>
            </el-table-column>
            <el-table-column
              prop="bookLaunchTime"
              label="书籍上架时间"
              width="155"
            >
              <template slot-scope="scope">
                {{ scope.row.bookLaunchTime }}
              </template>
            </el-table-column>
            <el-table-column
              prop="bookEndOrSerial"
              label="完结或连载"
              width="120"
            >
              <template slot-scope="scope">
                <div :class="scope.row.bookEndOrSerial == 2 ? 'end' : 'serial'">
                  {{ scope.row.bookEndOrSerial == 1 ? '连载中' : '已完结' }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="bookNumberOfWords"
              label="字数总数"
              width="120"
            >
            </el-table-column>
            <el-table-column prop="bookNumberOfHits" label="点击数" width="120">
            </el-table-column>
            <el-table-column
              prop="bookToUpdate"
              label="最新更新时间"
              width="155"
            >
              <template slot-scope="scope">
                {{
                  scope.row.bookToUpdate == '1970-01-1 8:0:0'
                    ? '暂无更新'
                    : scope.row.bookToUpdate
                }}
              </template>
            </el-table-column>
            <el-table-column
              prop="bookGeneralSection"
              label="总章节"
              width="120"
            >
            </el-table-column>
            <el-table-column
              prop="bookClassification"
              label="书籍分类"
              width="120"
            >
            </el-table-column>
            <el-table-column prop="bookCollection" label="收藏数" width="120">
            </el-table-column>
            <el-table-column prop="bookStatus" label="书籍状态" width="120">
              <template slot-scope="scope">
                <el-dropdown>
                  <el-button
                    size="mini"
                    :class="scope.row.bookStatus == 1 ? 'my-el-button' : ''"
                    :type="scope.row.bookStatus == 1 ? 'primary' : 'danger'"
                  >
                    {{ scope.row.bookStatus == 1 ? '上架中' : '已下架'
                    }}<i class="el-icon-arrow-down el-icon--right"></i>
                  </el-button>
                  <el-dropdown-menu></el-dropdown-menu>
                </el-dropdown>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 开始-->
          <div class="pagination">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="queryBookCondition.page"
              :page-sizes="[5, 10, 15, 30]"
              :page-size="queryBookCondition.size"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
          </div>
        </div>
      </el-card>
      <!-- 主体结束 -->
    </div>
  </div>
</template>
<script>
import { bookQueryPage, bookQueryTotal } from '@/network/bookManager'
import { timeStampFormatStr } from '@/util/dataTimeUtil'
// import { queryChapterLately } from '@/network/chapterManager'
export default {
  data() {
    return {
      bookTableData: [],
      // 条件对象
      queryBookCondition: {
        page: 1,
        size: 5,
        search: '',
        authorId: ''
      },
      loading: false, // 加载
      dialogTableVisible: false,
      bookName: '', //小说名
      chapterList: [], // 章节集合
      dialogLoading: false, // card面板 加载
      total: 10,
      // 角色
      role: {},
      // 账户
      user: {}
    }
  },
  methods: {
    // 查询书籍信息
    async queryBook() {
      this.loading = true // 开启loading
      if (this.role.roleName != '超级管理员') {
        this.queryBookCondition.authorId = this.user._id
      }
      let res = await bookQueryPage(this.queryBookCondition)
      console.info(res)
      let resTotal = await bookQueryTotal(this.queryBookCondition)
      if (res.errcode !== 0 || res.errmsg != 'ok')
        return this.$message.warning('页面加载错误，请刷新当前页面')
      this.bookTableData = [] // 置空原数据
      this.total = resTotal.count // 设置总数
      for (let rs in res.data) {
        this.bookTableData.push(JSON.parse(res.data[rs]))
        this.bookTableData[rs].bookLaunchTime = this.timeStampFormatStr(
          this.bookTableData[rs].bookLaunchTime.$date
        )
        this.bookTableData[rs].bookToUpdate =
          this.timeStampFormatStr(this.bookTableData[rs].bookToUpdate.$date) ==
          '1970-01-1 8:0:0'
            ? '暂无更新'
            : this.timeStampFormatStr(this.bookTableData[rs].bookToUpdate.$date)
      }
      this.loading = false // 关闭loading
    },
    timeStampFormatStr,
    // 章节详情
    async chapterDetails(row, column, event) {
      this.$router.push({
        name: 'chapterDetails',
        params: { novelId: row._id }
      })
      console.info(column)
      console.info(event)
    },
    // 将 阿拉伯数字123 转换成 字符串数字一二三
    numForStr(n) {
      var cnum = [
        '零',
        '一',
        '二',
        '三',
        '四',
        '五',
        '六',
        '七',
        '八',
        '九',
        '十'
      ]
      var s = ''
      n = '' + n // 数字转为字符串
      for (var i = 0; i < n.length; i++) {
        s += cnum[parseInt(n.charAt(i))]
      }
      if (s.length == 2) {
        // 两位数的时候
        // 如果个位数是0的时候，令改成十
        if (s.charAt(1) == cnum[0]) {
          s = s.charAt(0) + cnum[10]
          // 如果是一十改成十
          if (s == cnum[1] + cnum[10]) {
            s = cnum[10]
          }
        } else if (s.charAt(0) == cnum[1]) {
          // 如果十位数是一的话改成十
          s = cnum[10] + s.charAt(1)
        }
      }
      return s
    },
    // size数据改变
    handleSizeChange(val) {
      this.queryBookCondition.size = val
    },
    // 翻页
    handleCurrentChange(val) {
      this.queryBookCondition.page = val
    }
  },
  // 监听属性
  watch: {
    'queryBookCondition.page': {
      // 页码发生变化
      handler: function() {
        this.queryBook()
      }
    },
    'queryBookCondition.size': {
      // 每页多少条发生变化
      handler: function() {
        this.queryBook()
      }
    }
  },
  // vue 生命周期方法
  async mounted() {
    this.role = JSON.parse(sessionStorage.getItem('role'))
    console.info(this.role)
    this.user = JSON.parse(sessionStorage.getItem('user'))
    this.queryBook()
  }
}
</script>
<style lang="less" scoped>
.end {
  color: #67c23a;
}
.text {
  font-size: 14px;
  border-top: 1px solid #d4d1d1;
}
.text:last-child {
  border-bottom: 1px solid #d4d1d1;
}
.item {
  padding: 18px 0;
}
.el-dialog__body {
  padding: 0px 20px 30px 20px;
}
.dialog-box-card {
  height: 67vh;
  overflow: auto;
}
.dialog-box-card::-webkit-scrollbar {
  /*滚动条整体*/
  width: 7px;
}
.dialog-box-card::-webkit-scrollbar-track {
  /*滚动条轨道*/
  background: rgb(214, 213, 213);
  border-radius: 2px;
}
.dialog-box-card::-webkit-scrollbar-thumb {
  /*滚动条里面的滑块*/
  background: rgb(172, 169, 169);
  border-radius: 10px;
}
.dialog-box-card::-webkit-scrollbar-thumb:hover {
  /*滚动条鼠标事件，鼠标放上去出现的事件*/
  background: rgb(172, 169, 169);
}
.dialog-box-card::-webkit-scrollbar-corner {
  /*滚动条边角*/
  background: #179a16;
}
</style>
